<template>
  <!-- 柱状图和折线图配合使用 -->
  <div
    style="width: 1200px; height: 600px; margin: 100px auto"
    id="chart"
  ></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.chart();
  },
  methods: {
    // 条形统计图
    chart() {
      //初始化
      var myCharts = this.$echarts.init(document.getElementById("chart"));
      // 配置项
      var option = {
        grid: {
          //  top: "10%",
          right: "3%",
          left: "10%",
          bottom: "20%",
        },
        //标题配置
        title: {
          text: "质量成本分析", //标题，加‘\n’可换行
          textStyle: {
            //文本样式
            fontWeight: "800",
          },
          left: "center",
        },
        // 图例
        legend: {
          left: "center",
          top: "22",
        },
        // x轴
        xAxis: {
          type: "category", //类目轴
          data: [
            "OBA选别费(行)",
            "RMA 报废品(行)",
            "RMA 重工品投入成本(行)",
            "返工返修投入成本(行)",
            "其它",
            "供应商索赔费(行)",
            "检验办公费(行)",
          ],
          position: "bottom", //x轴位置：top或bottom（默认）
          axisLabel: {
            interval: 0,
          },
        },
        //  type: "value", //数值轴，对应series中的data
        //   position: "left", //y轴位置，left (默认)或right
        // y轴
        yAxis: [
          {
            // name: "交易额（亿元）",
            type: "value",
            nameTextStyle: { fontSize: 20 },
          },
          {
            // name: "增长率(%)",
            type: "value",
            min: 0,
            max: 100,
            position: "right",
            axisLabel: {
            //   textStyle: { fontSize: 20 },
              formatter: "{value} %", // 给坐标轴标签加单位
            },
            itemStyle: {
              color: "#ffd07a",
            },
          },
        ],

        //数据筛选，需要配合series使用，data中的每一项对应name值
        series: [
          {
            name: "四级科目",
            type: "bar", //类型：bar：柱状图，line：折线图，pie：饼装图
            data: [65165, 28678.08, 23258, 13916.87, 8331.93, 1974.92, 683.96],
            color: "rgb(0,176,80)",
            //显示数值
            label: {
              show: true, //设置显示
              formatter: function (arg) {
                //通过回调函数动态显示文字内容,percent:所占百分比
                return arg.value;
              },
              position: "top",
            },
            barWidth: "30%", //宽度
          },
          {
            name: "Target",
            type: "line",
            data: [45.89, 20.11, 16.31, 9.76, 5.84, 1.39, 0.84],
            color: "rgb(192,80,77)",
            yAxisIndex: 1
          },
        ],
        // 提示
        tooltip: {
          trigger: "item",
          showContent: true,
          //   trigger: "item", //触发类型：放在图上
          //   trigger: "axis", //触发类型：放在坐标轴上
          //   triggerOn: "mouseover", //触发方式：click：点击，mouseover：鼠标移入(默认)
          formatter: function (arg) {
            //提示文字也可以是个回调函数
            return arg.name + ":" + arg.value;
          },
        },
      };
      myCharts.setOption(option);
    },
  },
};
</script>

<style>
</style>